<template>
	<a-auto-complete
		:class="[
			'app-editor-container',
			'app-auto-complete',
			`app-auto-complete-${name}`,
		]"
		v-model:value="value"
		dropdownClassName="app-editor-autocomplete-dropdown"
		:options="items"
		:disabled="disabled"
		@search="onSearch"
		@change="onChange"
		:placeholder="placeholder"
		:allowClear="true"
	>
		<template #option="item">
			<a-empty v-if="items.length == 0" :image="simpleImage"></a-empty>
			<div v-else>
				{{ item[deMajorField] }}
			</div>
		</template>
	</a-auto-complete>
</template>
<script setup lang="ts">
import { Ref, ref } from 'vue';
import { Empty } from 'ant-design-vue';
import { IParam, IEvent, deepCopy } from '@/core';
import { autoCompleteProps } from './auto-complete';
import { handleEditorNavParams, useEditorTypeParams, searchEntityData } from '@/hooks/use-editor';
// 自动填充编辑器，会用户输入的内容进行相应的提示，可限定用户输入内容必须来自选择或是自由填写，可提供下拉的操作方式列出全部可选内容供用户选择
interface EditorEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const props = defineProps(autoCompleteProps);
const emit = defineEmits<EditorEmit>();
const { navContext, navViewParam } = handleEditorNavParams(props);
// 类型校验
const { validateConfig } = useEditorTypeParams();
validateConfig();
// 传入参数 #选择视图 FORCESELECTION   #下拉显示 TRIGGER
const { editorType, FORCESELECTION, TRIGGER } = useAttrs();

const value = ref('');

watch(
	() => props.value,
	(newVal: any, oldVal: any) => {
		if (newVal !== oldVal) {
			// 绑定当前值
			value.value = newVal;
		}
	},
	{
		immediate: true,
		deep: true,
	}
);

const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

let items: Ref<any[]> = ref([]);

/**
 * @description 搜索
 * @param value 搜索值
 */
const onSearch = (value: string) => {
	const _navContext = deepCopy(navContext);
	const _navViewParam = deepCopy(navViewParam);
	Object.assign(_navViewParam, { query: value, size: 1000 });
	if (props.sort) {
		Object.assign(_navViewParam, { sort: props.sort });
	}
	const requestException: string = App.ts(
		'common.generic.requestexception',
		'请求异常'
	);
	if (!props.acParams) {
		console.warn(App.ts('common.generic.miss', '参数不存在'));
	} else {
		const { serviceName, interfaceName } = props.acParams;
		const { deKeyField, deCodeName } = props;
        searchEntityData(
            serviceName,
            interfaceName,
            _navContext,
            _navViewParam,
            deKeyField,
            deCodeName
        )
        .then((response: any) => {
            if (!response) {
                console.warn(App.ts('common.generic.loadfail', '加载数据失败'));
                return;
            } else {
                if (response.length > 0) {
                    const result = [...response];
                    // 处理结果值
                    result.forEach((item: IParam) => {
                        item.value = item.label;
                    });
                    items.value = result;
                }
            }
        })
        .catch((error: any) => {
            console.warn(error && error.message ? error.message : requestException);
        });
	}
};

/**
 * @description 值变更
 * @param value 变更值
 */
const onChange = (value: any) => {
	let emitStr: any;
	// 清空
	if (!value) {
		emitStr = null;
	} else {
		emitStr = value;
	}
	emit('component-action', {
		name: `${props.name}`,
		action: 'valueChange',
		data: emitStr,
	});
};
</script>
